<!DOCTYPE html>
<!--登录页面-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        h1
        {
            color:orange;
            text-align:center;
        }
        container{
            text-align: center;
            background-color: #888;
            border-radius: 300px;
            width: 300px;
            height: 350px;
            margin:auto;
            position:center;
            left: 0%;
            top: 0%;
            bottom:0%;
            right:0%;
        }
    </style>
</head>
<body>
<br>
<br>
<br>



<div class="container">
    <h1>登录界面</h1>
        <div class="col-md-offset-3 col-md-6" style="margin: auto">
            <div class="form-horizontal">
                <span class="heading">用户登录</span>
                <div class="form-group">
                    <input type="text" class="form-control" id="username" name="username" placeholder="username">
                    <i class="fa fa-user"></i>
                </div>
                <div class="form-group help">
                    <input type="password" class="form-control" id="password" name="password" placeholder="password">
                    <i class="fa fa-lock"></i>
                </div>
                <div class="form-group row">
                    <button type="button" style="position: absolute;width:100px;height:50px;left:  150px;" class="btn btn-success" id="logon">注册</button>
                    <button type="button" style="position: absolute;width:100px;height:50px;right: 150px;" class="btn btn-success" id="login">登录</button>
                </div>
            </div>

    </div>
</div>

</body>
</html>
<script>
    $(document).ready(
        $("#logon").click(function (){
            window.location.href="/logon"
        }),
        $("#login").click(function (){
            var username=$("#username").val()
            var password=$("#password").val()
            $.ajax({
                url: "/loginCheck",
                type: "POST",
                data: {
                    "username":username,
                    "password":password
                },
                success: function (result) {
                    console.log(result);
                    if(result === "success"){
                        window.location.href="/index"
                    }
                    else if(result==="passwordError"){
                        alert("密码错误")
                    }
                    else if (result==="error"){
                        alert("用户名不存在")
                    }
                    else if (result==="lock"){
                        alert("用户已被锁定")
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误！");
                }
            })

        })
    )

</script>